<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<script type="text/javascript" src="hammer.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;text-decoration: none}
		.ul1{
			border-top:1px solid gray;box-sizing: border-box;
		}
		.li1{
			border-bottom: 1px solid gray;background: #ccc;
			width: 100%;height:50px;position: relative;
			line-height: 50px;overflow: hidden;box-sizing: border-box;
		}
		.msg{
			text-align: left;
			background: #ccc;
			z-index: 2;width: 100%;
			position: absolute;top: 0;left: 0;
			box-sizing: border-box;
			/*transform: translateX(-100px);*/
		}
		.ii{width: 15px;height: 15px;border-radius: 50%;
			background: lightblue;display: inline-block;margin-right: 5px;
		}
		.btn{
			width: 100px;position: absolute;top: 0;right: 0;background: red;
		}
		.rend{z-index: 1;
			background: #3390FF;display: inline-block;
			width: 50px;height:50px;line-height:20px;color: white;padding: 5px;box-sizing: border-box;
			position: absolute;top: 0;right: 50px;
		}
		.del{z-index: 1;
			background: red;color: white;display: inline-block;text-align: center;
			height: 50px;width:50px;line-height: 50px;
			position: absolute;top: 0;right: 0px;
		}
		/*.del::after{
			content: '';
			display: inline-block;
			clear:both;
		}*/
	</style>
</head>
<body>
	<ul id="ul1">
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息1</div><div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息2</div><div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息3</div><div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息4</div><div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
	
	</ul>
	<script type="text/javascript">
		window.onload=function(){
			let oli=document.querySelectorAll('.li1');
				Array.from(oli).forEach(li=>{
					let hammer=new Hammer(li,{});

					let disX=0;//记录起点坐标''
					let x=0;//记录移动距离
					let content=li.children[0];
					// let obtn=li.children[1].children;
					hammer.on('panstart',ev=>{
						disX=ev.center.x-x;
						Array.from(oli).forEach(li=>{
							let content=li.children[0];
							content.style.transition='0.7s all ease';
							content.style.transform='translateX(0)';
						})
					});
					hammer.on('panmove',ev=>{
						// console.log(ev.center.x,ev.center.y)
						x=ev.center.x-disX;
						// center.style.transform=``
						if(x>0){
							x=0;
						content.style.transition='0.7s all ease';
						content.style.transform=`translateX(${x}px)`;
						}else{
							// x=-100;
							content.style.transition='0.7s all ease';
						content.style.transform=`translateX(${x}px)`;
						}
					});
					hammer.on('panend',ev=>{
						if(x>0){
							x=0;
							content.style.transition='0.7s all ease';
							content.style.transform=`translateX(${x}px)`;
						}else{
							x=-100;
						}
						
					});
	
			});	
		};
	</script>
</body>
</html>